<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入echarts -->
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box1,
			.box2 {
				width: 800px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<script>
			let dom1 = document.querySelector('.box1')
			let dom2 = document.querySelector('.box2')
			// console.log(echarts)
			let myEcharts1 = echarts.init(dom1)
			let myEcharts2 = echarts.init(dom2)
			// 数据集
			// let data = []
			// console.log(myEcharts1)
			// 指定图表的配置项与数组
			myEcharts1.setOption({
				// 图表标题
				title: {
					// 主标题
					text: '数据可视化',
					// 子标题
					subtext: 'Echarts入门',
					// 设置主标题颜色
					textStyle: {
						color: 'red'
					},
					// 设置标题位置
					left: 'center',
				},
				// 配置X轴
				xAxis: {
					data: ['衣服', '直播', '游戏', '电影']
				},
				// 配置Y轴
				yAxis: {
					axisLine: {
						show: true
					},
					axisTick: {
						show: true
					}
				},
				// 系列设置
				series: [{
					// 图表类型设置
					// bar柱状图 line折线图 pie饼图 scatter散点 可与xy轴设置type:'category'
					type: 'bar',
					// 图表数据
					data: [10, 20, 30, 40, 50, 60],
					color: 'red'
				}],
				// 提示组件
				tooltip: {
					textStyle: {
						color: 'orange'
					},
				},
				// 工具栏组件
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: "none"
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ["line", "bar"]
						},
						restore: {},
						saveAsImage: {}
					},
				},
				dataZoom:{}
			});
			myEcharts2.setOption({
				title: {
					// 主标题
					text: 'Echarts折线图',
					left: 'left',
					textStyle: {
						color: 'red'
					},
					subtext: 'Echarts多图表',
					subtextStyle: {
						color: 'cyan'
					}
				},
				xAxis: {
					data: ['Monday', 'Tuesday', 'Wednesday', 'ThursDay', 'Friday', 'Saturday', 'Sunday']
				},
				yAxis: {
					// type:'category'
				},
				// 设置图表类型与数据
				series: [{
					name: '折线图',
					type: 'line',
					data: [10, 20, 25, 60, 35, 40, 75],
					color: 'cyan'
				}, {
					name: '饼图',
					type: 'pie',
					data: [{
						value: 30,
						name: 'ApplePie'
					}, {
						value: 20,
						name: 'OrangePie'
					}, {
						value: 40,
						name: 'PineapplePie'
					}, {
						value: 50,
						name: 'BananaPie'
					}],
					width: 200,
					height: 200,
					left: 150,
					top: 25,
					// 此处饼图容易溢出隐藏
					radius: 30
				}, {
					name: '柱状图',
					type: 'bar',
					data: [55, 25, 35, 45]
				}],
				// 提示组件
				tooltip: {
					textStyle: {
						color: 'orange'
					},
				},
				// 系列切换组件
				legend: {
					data: ['柱状图', '折线图', '饼图']
				}
			})
		</script>
	</body>
</html>
